import React, { memo, useEffect, useState } from "react";
import { AskMomentDetailWrapper } from "./style";
import { getMommentDetail } from "@/service/discover";
import Moment from "./child/detail";
import RelatedMoment from "./child/related-moment";
import { getUserMommentRelated } from "@/service/discover";
export default memo(function MomentDetail(props) {
  let arr = props.location.search.split("&");
  let article_id = arr[0].split("=")[1];
  const [detail, setdetail] = useState({});
  const [relatedList, setrelatedList] = useState([]);
  useEffect(() => {
    document.title = "一片月-瞬间详情";
  });
  const getDetail = () => {
    let obj = {
      article_id,
    };
    getMommentDetail(obj).then((res) => {
      setdetail(res.data[0]);
    });
  };

  const getUserRelated = async () => {
    let obj = {
      page: 1,
      size: 6,
      user_id: detail.user_id,
    };

    const res = await getUserMommentRelated(obj);
    setrelatedList(res.data);
  };

  useEffect(() => {
    getDetail();
  }, []);

  useEffect(() => {
    if (detail.user_id) {
      getUserRelated();
    }
  }, [detail]);

  const refresh = () => {
    getDetail();
  };
  return (
    <AskMomentDetailWrapper>
      <div className="moment-detail-main">
        <div className="m-d-left">
          <Moment
            uid={detail.user_id}
            aid={article_id}
            refresh={getDetail}
            item={detail}
          ></Moment>
        </div>
        <div className="m-d-right">
          <RelatedMoment relatedList={relatedList}></RelatedMoment>
        </div>
      </div>
    </AskMomentDetailWrapper>
  );
});
